<style>

  .player-left {
    height: 480px;
    /*border: 1px solid #d7dde4;*/
    /*border-left: 0;*/
    background-color: #464c5b;
    overflow-y: auto;
  }

  .video-img {
    /*border-radius: 20px;*/
    /*margin-top: -5px;*/
    width: 72px;
    height: 48px;
    /*float: right;*/
  }
</style>
<template>
  <div v-if="getRoom">
    <Row>
      <i-col span="20">
        <video-player ref="videoPlayer"
                      :options="videoOptions"
                      @play="onPlayerPlay($event)"
                      @pause="onPlayerPause($event)"
                      @ended="onPlayerEnded($event)"
                      @waiting="onPlayerWaiting($event)"
                      @playing="onPlayerPlaying($event)"
                      @timeupdate="onPlayerTimeupdate($event)"
                      @canplay="onPlayerCanplay($event)"
                      @canplaythrough="onPlayerCanplaythrough($event)"
                      @ready="playerReadied"
                      @statechanged="playerStateChanged($event)">
        </video-player>
      </i-col>
      <i-col span="4" style="height: 100%;" v-if="getRoom">
        <div class="player-left" dis-hover>
          <Menu :active-name="playing" @on-select="handleselect" theme="dark" mode="vertical"
                style="width: 100%;">
            <Menu-item :name="idx" v-for="(item,idx) in playList" :key="idx" class="ivu-menu-item-v">
              {{item.name}}
              <br>
              <img :src="imgSrc(item.img)" class="video-img">
            </Menu-item>
          </Menu>
          </Menu>
        </div>
      </i-col>
    </Row>
    <chat :roomid="this.videoOptions.sources[0].name" v-if="isLIve && canchat"></chat>
  </div>

</template>
<script>
  import {videoPlayer} from 'vue-video-player'
//  import SWF_PATH from 'video.js/dist/video-js.swf'
  //  import 'videojs-flash'
//  window.videojs.options.sw
//  console.log(videoPlayer.player)
//  window.videojs.options.flash.swf=SWF_PATH
  import SWF_PATH from 'video.js/dist/video-js.swf'
  window.videojs = require('video.js')
  window.videojs.options.flash.swf=SWF_PATH
  import {V_ROOT} from '../../config/config'
  import api from '../../api'
  import chat from '../chat/chat.vue'
  import Chat from '../../api/wsclient'
  export default {
    components: {
      videoPlayer,
      chat
    },
    data: function () {
      return {
        wtime: null,
        canchat: false,
        playing: null,
        videoOptions: {
          language: 'zh-CN',
          sources: [],
          live: true,
          height: 480,
//          poster: '',
          autoplay: true,
        },
      }
    },
    props: {
      playList: {
        type: Array,
        default () {
          return []
        }
      },
      isLIve: {
        type: Boolean,
        default(){
          false
        }
      }
    },
    computed: {
      player() {
//        this.$refs.videoPlayer.player.options.flash.swf=SWF_PATH

        return this.$refs.videoPlayer.player
      },
      getRoom(){
        if (this.isLive) {
          return false
        }
        if (this.playList && this.playList.length > 0) {
//          this.playing = 0
          return true
        } else {
          return false
        }
      },
      getOptions(){
        return this.videoOptions
      },

    },
    methods: {
      imgSrc(data){
        return V_ROOT + "/" + data
      },
      handleselect(name)
      {
        Chat.logout()
        this.playing = name
        this.videoOptions.sources = []
        this.videoOptions.sources[0] = this.playList[name]
//        console.log(this.player)
//        this.player.options.flash.swf=SWF_PATH
        console.log(this.player)
        api.VideoWatch(this.videoOptions.sources[0])
        this.canchat = true
      },
      handleopen(key, keyPath)
      {
        console.log(key, keyPath);
      },
      handleclose(key, keyPath)
      {
        console.log(key, keyPath);
      },

      // listen event
      onPlayerPlay(player) {
//         console.log('player play!', player)
      },
      onPlayerPause(player) {
        let ct = new Date()
        let ret = player.options_.sources[0]
        ret.times = (ct.getTime() - this.wtime.getTime()) / 1000
        ret.vtype = 2
//        this.wtime=ct
        console.log('player pause!', player)
        api.watchhistory(ret)
      },
      onPlayerEnded(player) {
        console.log('player ended!', player)
      },
      onPlayerLoadeddata(player) {
//         console.log('player Loadeddata!', player)
      },
      onPlayerWaiting(player) {
        console.log('player Waiting!', player)
      },
      onPlayerPlaying(player) {
        this.wtime = new Date()
        console.log('player Playing!', player)
      },
      onPlayerTimeupdate(player) {
//         console.log('player Timeupdate!', player.currentTime())
      },
      onPlayerCanplay(player) {
//         console.log('player Canplay!', player)
      },
      onPlayerCanplaythrough(player) {
//         console.log('player Canplaythrough!', player)
      },
      // or listen state event
      playerStateChanged(playerCurrentState) {
//         console.log('player current update state', playerCurrentState)
      },
      // player is ready
      playerReadied(player) {
//        console.log('example 01: the player is readied', player)
      }

    },
    mounted () {
//      this.handleselect(0)

    },
    beforeDestroy () {

    },
  }

</script>

